import {Outlet, history} from 'umi';
import { useEffect, useMemo, useRef, useState } from 'react';
import '../rem.js'
import './index.less'
import qu from '../assets/audio/qu.mp3'
import Pinglun from '@/pages/pinglun/pinglun';
export default function Layout() {
  let [musicstate, setmusicstate] = useState(false)
  let [startX, setstartX] = useState(0)
  let [startY, setstartY] = useState(0)
  let [currentIndex, setCurrnetIndex] = useState(0)
  useEffect(() => {
    history.push('/')
  },['1'])
  let [routerarr] = useState(['/','/page2/page2','/page3/page3','/page4/page4','/page5/page5','/page6/page6','/page7/page7','/page8/eight','/page9/page9','/page10/page10'])
  useEffect(() => {
    let audio = document.querySelector('audio') as HTMLAudioElement;
    musicstate ? audio.play() : audio.pause()
  },[musicstate])
  const starttouch = (e:any) => {
    let start = e.targetTouches[0]
    setstartX(start.clientX)
    setstartY(start.clientY)
  }
  const endtouch = (e:any) => {
    let end = e.changedTouches[0]
    let x = currentIndex
    let pages = document.querySelector('.wrap') as HTMLBodyElement;
    // if ((startX - end.clientX > 50) || (startY - end.clientY > 50)){
    if (startY - end.clientY > 50){
      x += 1
      if (x >= routerarr.length)return setCurrnetIndex(routerarr.length - 1)
      setTimeout(() => {
        history.push(routerarr[x])
        pages.style.animation = 'none'
      },1000)
      pages.style.animation = 'nextPage2 1s linear'


      
    // }else if((startX - end.clientX < -50) || (startY - end.clientY < -50)){
    }else if(startY - end.clientY < -50){
      x -= 1
      if(x < 0)return setCurrnetIndex(0)
      setTimeout(() => {
        history.push(routerarr[x])
        pages.style.animation = 'none'
      },1000)
      pages.style.animation = 'nextPage1 1s linear'
      
    }
    setCurrnetIndex(x)
  }
  return (
        <div className='pages'>
          {
            currentIndex > 0 && (<Pinglun/>)
          }
          <div 
            className={`yinfu ${musicstate ? 'yinfu_kai' : 'yinfu_guan'}`}
            onClick={()=>setmusicstate(!musicstate)}
            ></div>
          <div className='wrap'>
            <div 
            className='fugai' 
            onTouchStart={(e)=>starttouch(e)}
            onTouchEnd={(e)=>endtouch(e)}
            ></div>
            <audio src={qu} loop></audio>
            <Outlet/>
          </div>
        </div>
      
      
  );
}
